<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Single Element Transition</title>
    <link rel="stylesheet" type="text/css" href="../../css/styles.css"/>
    <script type="text/javascript" src="../../lib/d3.js"></script>
</head>

<body>

<script type="text/javascript">
    var body = d3.select("body"),
        duration = 500;

    body.append("div") // <-A
        .classed("box", true)
        .style("background-color", "#e9967a") // <-B
        .transition() // <-C
        .duration(duration) // <-D
        .style("background-color", "#add8e6") // <-E
        .style("margin-left", "600px") // <-F
        .style("width", "100px")
        .style("height", "100px")
        .transition()      //要实现单元素连续动画就直接加在后面
        .duration(duration)
        .style("background-color", "#19e549")
        .style("margin-top", "100px")
        .style("margin-left","100px")
        .style("width", "500px")
        .style("height", "50px");


</script>

</body>

</html>